<template>
  <el-drawer :visible.sync="show" width="420px" class='base-selection-panel'>
    <h3 slot="title">
      <span>{{$t('common.base.selected')}}({{ data.length }})</span>
      <i
        v-if="data.length > 0"
        class="iconfont icon-qingkongshanchu panel-btn"
        @click="toggleSelection()"
        :title="$t('common.base.tip.clearChoseDataTip')" 
        data-placement="right"
        v-tooltip
      ></i>
    </h3>

    <div class="selected-panel">
      <div class="selected-tip" v-if="data.length <= 0">
        <img :src="noDataImage" />
        <p>{{$t('common.base.tip.noSelectedDataFromList')}}</p>
      </div>
      <template v-else>
        <el-table :data="data" v-table-style>
          <el-table-column
            v-for="(col, idx) in columns"
            :key="idx"
            :prop="col.prop"
            :label="col.label"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column style="border: none" fixed="right" width="36">
            <template slot-scope="scope">
              <i
                class="iconfont icon-fe-close btn-close"
                @click="changeSelection(scope.row)"
              ></i>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </el-drawer>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'base-selection-panel',
  data() {
    return {
      show: false,
      noDataImage
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableRef: {
      type: Object,
    },
    propKey: {
      type: String,
      default: 'id',
    },
  },
  methods: {
    toggleSelection() {
      this.$emit('toggleSelection');
    },
    changeSelection(row) {
      let key = row[this.propKey];
      
      this.$emit(
        'change',
        this.data.filter((item) => {
          if (item[this.propKey] === key) {
            if (this.tableRef) {
              this.$nextTick(() => {
                this.tableRef.toggleRowSelection(row);
              });
            }
            return false;
          }
          return true;
        })
      );
    },
    openPanel() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.selected-tip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 160px;
    height: 160px;
    margin-top: 80px;
  }
  p {
    margin-top: 8px;
    color: $text-color-regular;
  }
}

.btn-close{
  display: none;
}

.base-selection-panel {
  .panel-btn {
    cursor: pointer;
    &:hover {
      @include fontColor()
    }
  }
}

/** element-ui */
::v-deep .el-drawer {
  width: 420px !important;
}
::v-deep .el-drawer__body {
  overflow: auto;
}
::v-deep .hover-row {
  cursor: pointer;
  .btn-close {
    display: initial;
  }
  &:hover {
    .btn-close {
      color: #ef6b6b;
    }
  }
}
</style>
